<%-- internal/maintain/reservation/index.jsp --%>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@page import="java.util.*" %>
<%@page import="problemDomain.EmployeeAccountBean"%>
<%@page import="problemDomain.EmployeeAccountBean.Position"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>

<%
	//get the currently logged on employee from session
	EmployeeAccountBean employee = (EmployeeAccountBean)session.getAttribute("employee");
	EmployeeAccountBean.Position pos = null;
	if (employee != null)
		pos = employee.getPosition();
	else {
		response.sendRedirect("../../login/");
		return;
	}
	if (pos != Position.MANAGER && pos != Position.HOST) {
		response.sendRedirect("../../login/");
		return;
	}

	//if calendar exist in the session, get it; otherwise, find out the current month and display it
	Calendar c = (Calendar)session.getAttribute("cal");
	if (c == null)
		c = Calendar.getInstance();
	
	if (request.getParameter("goToPreviousMonth") != null)
	{
		if (c.get(Calendar.MONTH) != 0)
			c.roll(Calendar.MONTH, false);
		else
		{
			c.roll(Calendar.YEAR, false);
			c.set(Calendar.MONTH, 11);
		}
	}
	else if (request.getParameter("goToNextMonth") != null)
	{
		if (c.get(Calendar.MONTH) != 11)
			c.roll(Calendar.MONTH, true);
		else
		{
			c.roll(Calendar.YEAR, true);
			c.set(Calendar.MONTH, 0);
		}	
	}
	int day = c.get(Calendar.DAY_OF_MONTH);
	int month = c.get(Calendar.MONTH) + 1;
	int year = c.get(Calendar.YEAR);

	
%>



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<link type="text/css" rel="stylesheet" href="../../css/general.css" />
		<link type="text/css" rel="stylesheet" href="../../css/framed.css" />
		<link type="text/css" rel="stylesheet" href="../../css/reservation/form.css" />
		<script type="text/javascript" src="../../js/ajax-handler.js"></script>
		<script type="text/javascript" src="../../js/form.js"></script>
		<script type="text/javascript" src="../../js/dialog.js"></script>
		<script type="text/javascript" src="../../js/reservation/maintain.js"></script>
		<script type="text/javascript" src="../../js/reservation/form.js"></script>
		
		<title>ORDRS - Maintain Reservation</title>
	</head>
		
	 <% out.print("<body onload=\"loadPage(" + day +", "+ month +", "+ year + ", 'month')\" > ");  %>
		<div id="wholePanel">
			<!-- Title -->
			<div class="pageTitle">
				<img src="../../images/logo.bmp" />
				<!-- Logout -->
				<div class="navi">
					<table class="navi" align="right">
						<tr>
						<%
					
						// Display the links according to the employee's position
						if (pos != null){
							out.println("<td class=\"navi\"><a href=\"../delivery/\">Delivery</a></td>");
							out.println("<td class=\"navi\"><a href=\"../order/\">Order</a></td>");
							
							if (pos == EmployeeAccountBean.Position.MANAGER) {
								out.println("<td class=\"navi\"><a href=\"../food-item/\">Food Item</a></td>");
								out.println("<td class=\"navi\"><a href=\"../menu/\">Menu</a></td>");
								out.println("<td class=\"navi\"><a href=\"../menu-item/\">Menu Item</a></td>");
								out.println("<td class=\"navi\"><a href=\"../employee/\">Employee</a></td>");
								out.println("<td class=\"navi\"><a href=\"../../view/report/\">Report</a></td>");
							}
						}
						
						%>
							
							<td class="navi"><a href="../../login/">Logout</a></td>
						</tr>
					</table>
				</div>
				<!-- END Logout -->
			</div>
			<!-- END Title -->			
			
			<!-- Panel -->
			<div class="panel">
			<fieldset>
			<legend>Maintain Reservation</legend>
				<table style="border: 0px; width: 100%;" align="center" >
					<tr style="height: 30px">
						<td rowspan="2">
							<!-- Fields -->
							<div>
								<input id="reservationID" type="hidden" value="" />
								<table align="center">
									<tr>
										<td><h4>Reservation Info</h4></td>
									</tr>
									<tr>
										<td class="fieldLabel">* First Name:</td>
										<td><input id="firstname" type="text" maxlength="30"/></td>
										<td id="firstnameMessage"></td>
									</tr>
									<tr>
										<td class="fieldLabel">Last Name:</td>
										<td><input id="lastname" type="text" maxlength="30"/></td>
										<td id="lastnameMessage"></td>
									</tr>
									<tr>
										<td class="fieldLabel">* Phone:</td>
										<td><input id="phone" type="text" maxlength="10"/></td>
										<td id="phoneMessage"></td>
									</tr>
									<tr>
										<td class="fieldLabel">* Number of People:</td>
										<td><input id="numPeople" type="text" maxlength="3"/></td>
										<td id="numPeopleMessage"></td>
									</tr>
									<tr>
										<td class="fieldLabel">Created by: </td>
										<td id="createdBy"></td>
									</tr>
									<tr>
										<td class="fieldLabel">Date Placed:</td>
										<td id="datePlaced"></td>
									</tr>
									<tr>
										<td class="fieldLabel">* Reservation Date:</td>
										<td>
											<select id="resDateDay">
											<optgroup label="Day">
											</optgroup>
												
												<%
													for (int i = 1; i < 32; i++)
														out.print("<option value=\""+ i +"\" >"+i+"</option>");
												%>
											</select>
											<select id="resDateMonth">
												<optgroup label="Month">
												</optgroup>
												<option value="1">January</option>
												<option value="2">February</option>
												<option value="3">March</option>
												<option value="4">April</option>
												<option value="5">May</option>
												<option value="6">June</option>
												<option value="7">July</option>
												<option value="8">August</option>
												<option value="9">September</option>
												<option value="10">October</option>
												<option value="11">November</option>
												<option value="12">December</option>
											</select>
											<select id="resDateYear">
												<optgroup label="Year">
												</optgroup>
												<%
													Calendar temp = Calendar.getInstance();
													year = temp.get(Calendar.YEAR);
													for (int i = 0; i < 20; i++, year++)
														out.print("<option value=\""+ year +"\" >"+year+"</option>");
												%>
											</select>
										</td>
										<td id="reservationDateMessage"></td>
									</tr>
									<tr>
										<td class="fieldLabel">* Reservation Time:
										</td>
										<td>
											<select id="resDateHour">
												<optgroup id="resHourOptGroup" label="Hour">
												</optgroup>
											</select> :
											<select id="resDateMinute">
												<optgroup id="resMinOptGroup" label="Minute">
													<% 	for (int i = 0; i < 60; i += 10)
															out.print("<option value=\"" + i + "\">" + (i == 0? "0"+ i: i)  +"</option>");
													%>
												</optgroup>
											</select>
										</td>
									</tr>
									<tr>
										<td class="fieldLabel">Description:</td>
										<td><textarea id="description" rows="3" cols="20"></textarea></td>
										<td id="descriptionMessage"></td>
									</tr>
									<tr><td>&nbsp;</td></tr>
									<tr>
										<td class="fieldLabel">Search by: </td>
										<td  colspan="2">
											<form id="searchOptForm">
												<input type="radio" id="searchOpt" name="searchOpt" value="name" checked="checked">First/Last Name and/or Phone No.
												</input><br />
												<input type="radio" id="searchOpt" name="searchOpt" value="date">Reservation Date
												</input>
											</form>
										</td>
									</tr>
								</table>
							</div>
						</td>
						
					<td rowspan="3" class="vrule" ></td>
					<td align="center" colspan="2">
						
						<!-- Calendar Panel -->
						<div style="overflow:auto; height:285px; width:600px;">
							<table align="center">
								<tr>
									<th class="calendarHead"><form>
											<input type="submit" name="goToPreviousMonth" value="&lt;&lt;"></input>
										</form>
									</th>
									<th colspan="5" align="center" class="calendarHead">
							<%
								
								
							String strMonth = null;
							int monthInt = c.get(Calendar.MONTH);
							
							switch (monthInt)
							{
								case 0: strMonth = "JANUARY"; break;
								case 1: strMonth = "FEBRUARY"; break;
								case 2: strMonth = "MARCH"; break;
								case 3: strMonth = "APRIL"; break;
								case 4: strMonth = "MAY"; break;
								case 5: strMonth = "JUNE"; break;
								case 6: strMonth = "JULY"; break;
								case 7: strMonth = "AUGUST"; break;
								case 8: strMonth = "SEPTEMBER"; break;
								case 9: strMonth = "OCTOBER"; break;
								case 10: strMonth = "NOVEMBER"; break;
								case 11: strMonth = "DECEMBER"; break;
								
							}
							session.setAttribute("cal",c);
							out.println(strMonth + " - "+c.get(Calendar.YEAR));
							//out.println("<select onchange=\"#\"> ")
							%>
									</th>
									<th align="center" class="calendarHead"><form>
										<input type="submit" name="goToNextMonth" value="&gt;&gt;"></input></form></th>
								</tr>
								<tr>
									<th class="calendarHead">SUN</th>
									<th class="calendarHead">MON</th>
									<th class="calendarHead">TUE</th>
									<th class="calendarHead">WED</th>
									<th class="calendarHead">THU</th>
									<th class="calendarHead">FRI</th>
									<th class="calendarHead">SAT</th>
								</tr>
								<tr>
							
							<% 
							// print out the dates in the calendar
							c.set(Calendar.DAY_OF_MONTH,1);
							for (int i = c.get(Calendar.DAY_OF_WEEK) -1; i > 0; i--)
								out.print("<td class=\"calendar\"></td>");
							
							do 
							{
								out.print("<td class=\"calendar\" align=\"center\" id=\"d" + c.get(Calendar.DAY_OF_MONTH)+
											"m" + c.get(Calendar.MONTH) + "y" + c.get(Calendar.YEAR) +
																	"\" >"+ c.get(Calendar.DATE)+ "</td>");
								if (c.get(Calendar.DAY_OF_WEEK) % 7 == 0)
									out.print("</tr><tr>");
								c.roll(Calendar.DAY_OF_MONTH,true);
								
							} while (c.get(Calendar.DAY_OF_MONTH) > 1);
							%>
								</tr>
								
							</table>
						</div>
						<!-- END Calendar Panel -->
						</td>
					</tr>
					<tr>
							<!-- END Fields -->
						<td class="resultsHead" >Results</td>
						<td>
							<ul class="toolbar">
								<li onclick="listAllReservation()">List All</li>
							</ul> 
						</td>
						<td>
							<!-- List All Button -->
							
						</td>
					</tr>
					<tr>
						<td style="vertical-align: top; padding-top: 10px;" align="center">
							<!-- Toolbar -->
							<ul class="toolbar">
								<li onclick="createReservation()">Create</li>
								<li onclick="reportReservation()">Search</li>
								<li onclick="updateReservation()">Update</li>
								<li onclick="deleteReservation()">Delete</li>
								<li onclick="resetFields()">Clear</li>
							</ul>
							<!-- END Toolbar -->
						
						</td>
						<td class="resultsTD"  colspan="2">
							<!-- Results -->
							<div id="results" class="resultsPanel">
							</div>
							
							<!-- END Results -->
						</td>
					</tr>
				</table>
				</fieldset>
			</div>
			<!-- END Panel -->
		</div>
	</body>
</html>
